<script setup>
import { ref } from "vue";
import SectionTitle from "../common/SectionTitle.vue";

const features = ref([
  {
    id: 1,
    icon: "Platform",
    title: "创新研发",
    description: "持续投入研发，引领农机技术创新",
  },
  {
    id: 2,
    icon: "Management",
    title: "品质保障",
    description: "严格质量控制，确保产品可靠耐用",
  },
  {
    id: 3,
    icon: "Cooperation",
    title: "服务支持",
    description: "完善的售后服务体系，及时响应客户需求",
  },
]);

const aboutDescription =
  "远实智能技术有限公司是一家专注于农业机械研发、生产和销售的高新技术企业。公司致力于将现代科技与传统农业相结合，提供智能化、高效率、环保型的农业机械设备和解决方案，助力农业现代化发展。";
</script>

<template>
  <section class="section about-section" id="about">
    <div class="section-container">
      <SectionTitle title="关于远实智能" :description="aboutDescription" />
      <el-row :gutter="20" class="about-features">
        <el-col
          :xs="24"
          :sm="24"
          :md="8"
          v-for="feature in features"
          :key="feature.id"
        >
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon :size="40"><component :is="feature.icon" /></el-icon>
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<style scoped>
.section {
  padding: var(--section-padding);
}

.about-section {
  background-color: var(--secondary-color);
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.about-features {
  margin-top: 40px;
}

.feature-card {
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  height: 100%;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 40px;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.feature-card p {
  color: var(--text-color-light);
}

@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }

  .feature-card {
    margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .section {
    padding: 40px 0;
  }
}
</style> 